<template>
	<view class="detail">
		<view class="fixbg" :style="{backgroundImage:'url('+songDetail.al.picUrl+')'}" />
			<musicHead :title="songDetail.name" :icon="true" color="white"/>
			<view class="container">
				<scroll-view scroll-y="true" >
					<view class="detailPlay" @tap="handleToPlay">
						<image :class="{'detailPlayRun':isPlayRotate}" :src="songDetail.al.picUrl" mode=""></image>
						<text class="iconfont" :class="iconPlay"></text>
						<view>
						</view>
					</view>
					<view class="detailLyric">
						<view class="detailLyricWrap" :style="{transform:'translateY('+ -(lyricIndex -1)*82+'rpx)'}">
							<view :class="{active:lyricIndex === index}" class="detailLyricItem" v-for="(i,index) in songLyricDetail" :key="index">
								{{i.lyric}}
							</view>
						</view>
					</view>
					<view class="detailLike">
						<view class="detailLikeHead">
							喜欢这首歌的人也听
						</view>
						<view class="detailLikeItem" v-for="(i,index) in songSimiDetail" :key="index" @tap="handleToSimi(i.id)">
							<view class="detailLikeImg">
								<image :src="i.album.picUrl" mode=""></image>
							</view>
							<view class="detailLikeSong">
								<view>
									{{i.name}}
								</view>
								<view>
									<image v-if="i.privilege.maxbr===999000" src="http://localhost:5173/static/sq.png" mode=""></image>
									<image v-if="i.privilege.flag!==260" src="http://localhost:5173/static/dujia.png" mode=""></image>
									{{i.album.artists[0].name}} - {{i.name}}
								</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
					<view class="detailComment">
						<view class="detailCommentHead">
							精彩评论
						</view>
						<view class="detailCommentItem" v-for="(i,index) in songCommentDetail" :key="index">
							<view class="detailCommentImg">
								<image :src="i.user.avatarUrl" mode=""></image>
							</view>
							<view class="detailCommentContent">
								<view class="detailCommentTitle">
									<view class="detailCommentName">
										<view >
											{{i.user.nickname}}
										</view>
										<view >
											{{$filters.formatTime(i.time)}}
										</view>
									</view>
									<view class="detailCommentLike">
										{{$filters.formatCount(i.likedCount)}}
										<text class="iconfont iconlike"></text>
									</view>
								</view>
								<view class="detailCommentText">
									{{i.content}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onLoad,onUnload,onHide} from '@dcloudio/uni-app'
import musicHead from '@/components/musicHead/musicHead.vue'
import {getSongDetail,getSongSimiDetail,getSongCommentDetail,getSongLyricDetail,getSongUrlDetail} from '@/services/api'
import {useStore} from '../../stores/index'

interface songDetailItem{
	name:string,
	al:any
}
const songDetail = ref<songDetailItem>({
	name:'',
	al:{}
})

interface songSimiDetailItem{
	album:{
		picUrl:string,
		artists:any[]
	},
	name:string,
	privilege:{
		flag:number,
		maxbr:number
	}
}
const songSimiDetail = ref<songSimiDetailItem[]>([])

interface songCommentDetailItem{
	user:{
		avatarUrl:string,
		nickname:string
	},
	time:number,
	likedCount:number,
	content:string
}
const songCommentDetail = ref<songCommentDetailItem[]>([])

interface songLyricDetailItem{
	time:string,
	lyric:string
}
const songLyricDetail = ref<songLyricDetailItem[]>([])
const lyricIndex = ref<number>(0)
const iconPlay = ref<string>('iconpause')
const isPlayRotate = ref<boolean>(true)
// #ifdef MP-WEIXIN
const bgAudioMannager = uni.getBackgroundAudioManager();
// #endif
// #ifdef H5
const bgAudioMannager = uni.createInnerAudioContext();
// #endif

const store = useStore()
const getMusic = (id:number) =>{
	uni.showLoading({
		title:'正在加载中...'
	})
	store.next_id(id)
	Promise.all([
		getSongDetail(id).then((res:any)=>{
			console.log('songDetail---',res);
			if(res.data.code === 200){
				songDetail.value = res.data.songs[0]
			}
		}),
		getSongSimiDetail(id).then((res:any)=>{
			console.log('songSimiDetail---',res);
			if(res.data.code===200){
				songSimiDetail.value = res.data.songs
			}
		}),
		getSongCommentDetail(id).then((res:any)=>{
			console.log('songCommentDetail---',res);
			if(res.data.code === 200) {
				songCommentDetail.value = res.data.hotComments
			}
		}),
		getSongLyricDetail(id).then((res:any)=>{
			console.log('songLyricDetail---',res);
			if(res.data.code === 200){
				let lyric = res.data.lrc.lyric;
				let result = [];
				let re = /\[([^\]]+)\]([^[]+)/g;
				lyric.replace(re,($0,$1:string,$2:string)=>{
					result.push({ time : formatTimeToSec($1) , lyric : $2 });
				});
				songLyricDetail.value = result
				console.log(result);
			}
		}),
		getSongUrlDetail(id).then((res:any)=>{
			console.log('songUrlDetail---',res);
			if(res.data.code === 200){
				// #ifdef MP-WEIXIN
				bgAudioMannager.title = songDetail.value.name;
				// #endif
				// #ifdef H5
				iconPlay.value = 'iconbofang1'
				isPlayRotate.value = false
				// #endif
				if(res.data.data[0].url!==null){
					bgAudioMannager.src = res.data.data[0].url
				}else{
					uni.showToast({
						title: '此歌曲仅VIP可播放！',
						duration: 2000
					});
					bgAudioMannager.src = ''
				}
				listenLyricIndex()
				bgAudioMannager.onPlay(()=>{
					iconPlay.value = 'iconpause'
					isPlayRotate.value = true
					listenLyricIndex()
				})
				bgAudioMannager.onPause(()=>{
					iconPlay.value = 'iconbofang1'
					isPlayRotate.value = false
					cancelLyricIndex()
				})
				bgAudioMannager.onEnded(()=>{
					getMusic(store.nextId)
				})
			}
		})
	])
	uni.hideLoading()
}

const formatTimeToSec = (value:string)=>{
	const arr = value.split(':')
	return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
}

const handleToPlay = () => {
	if(bgAudioMannager.paused){
		bgAudioMannager.play()
	}else{
		bgAudioMannager.pause()
	}
}

const handleToSimi = (id:number) =>{
	getMusic(id)
}

let timer:any

const listenLyricIndex = () =>{
	clearInterval(timer)
	timer = setInterval(()=>{
		for(let i = 0;i<songLyricDetail.value.length;i++){
			if(bgAudioMannager.currentTime>Number(songLyricDetail.value[songLyricDetail.value.length-1].time)){
				lyricIndex.value = songLyricDetail.value.length-1
				break
			}
			if(bgAudioMannager.currentTime > Number(songLyricDetail.value[i].time) && bgAudioMannager.currentTime < Number(songLyricDetail.value[i+1].time)){
				lyricIndex.value = i
			}
		}
	},500)
}

const cancelLyricIndex = () =>{
	clearInterval(timer)
}

onLoad((option)=>{
	getMusic(option.id)
})

onUnload(()=>{
	cancelLyricIndex()
	// #ifdef H5
	bgAudioMannager.destroy()
	// #endif
})

onHide(()=>{
	cancelLyricIndex()
	// #ifdef H5
	bgAudioMannager.destroy()
	// #endif
})
</script>

<style scoped lang="scss">
.detailPlay{
	position: relative;
	margin: 213rpx auto 0 auto;
	width: 580rpx;
	height: 580rpx;
	background: url(http://localhost:5173/static/disc.png);
	background-size: cover;
	image{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}
	text{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
	}
	view{
		position: absolute;
		left: 100rpx;
		top: -200rpx;
		right: 0;
		margin: auto;	
		width: 230rpx;
		height: 360rpx;
		background: url(http://localhost:5173/static/needle.png);
		background-size: cover;
	}
	.detailPlayRun{
		animation-play-state:running;
	}
}
@keyframes move {
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detailLyric{
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	color: #6f6e73;
	text-align: center;
	overflow: hidden;
	.detailLyricWrap{
	}
	.detailLyricItem{
		height: 82rpx;
		&.active{
			color: white;
		}
	}
}
.detailLike{
	margin: 0 30rpx;
	.detailLikeHead{
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}
	.detailLikeItem{
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
		text{
			font-size: 50rpx;
			color: #c6c2bf;
		}
	}
	.detailLikeImg{
		margin-right: 20rpx;
		width: 82rpx;
		height: 82rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.detailLikeSong{
		flex: 1;
		color: #c6c2bf;
		view:nth-child(1){
			margin-bottom: 12rpx;
			font-size: 28rpx;
			color: white;
		}
		view:nth-child(2){
			font-size: 22rpx;
		}
		image{
			margin-right: 10rpx;
			width: 26rpx;
			height: 20rpx;
		}
	}
}
.detailComment{
	margin: 0 30rpx;
	.detailCommentHead{
		margin: 50rpx 0;
		font-size: 36rpx;
		color: white;
	}
	.detailCommentItem{
		display: flex;
		margin-bottom: 28rpx;
	}
	.detailCommentImg{
		margin-right: 18rpx;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.detailCommentContent{
		flex: 1;
		color: #cbcacf;
	}
	.detailCommentTitle{
		display: flex;
		justify-content: space-between;
	}
	.detailCommentName{
		view:nth-child(1){
			font-size: 26rpx;
		}
		view:nth-child(2){
			font-size: 20rpx;
		}
	}
	.detailCommentLike{
		font-size: 28rpx;
	}
	.detailCommentText{
		margin-top: 20rpx;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #e0e0e0;
		font-size: 28rpx;
		line-height: 40rpx;
		color: white;
	}
}
</style>
